<template>
	<!-- 三级分类 -->
	<Category :scene="scene"></Category>
	<!-- spu数据展示 begin -->

	<el-card style="margin: 10px 0px">
		<!-- 场景切换  0 平台SPU展示  begin  -->
		<div v-show="scene == 0">
			<!-- 添加spu按钮 begin -->
			<el-button
				type="primary"
				:icon="Plus"
				:disabled="categoryStore.c3Id ? false : true"
				@click="addSpu"
				>添加SPU</el-button
			>
			<!-- 添加spu按钮 begin -->
			<!-- spu table展示 begin -->
			<el-table
				border
				style="margin: 10px 0px"
				:data="spuArr"
			>
				<!-- 序号 begin -->
				<el-table-column
					label="序号"
					type="index"
					width="80"
					align="center"
				>
				</el-table-column>
				<!-- 序号 end -->

				<!-- SPU名称 begin -->
				<el-table-column
					label="SPU名称"
					prop="spuName"
				>
				</el-table-column>
				<!-- SPU名称 end -->

				<!-- SPU描述 begin -->
				<el-table-column
					label="SPU描述"
					prop="description"
				>
				</el-table-column>

				<!-- SPU描述 end -->

				<!-- 操作 begin -->
				<el-table-column label="操作">
					<template #="{ row, $index }">
						<!-- 添加sku按钮 begin -->
						<el-button
							type="primary"
							size="small"
							:icon="Plus"
							title="添加SKU"
							@click="addSku(row)"
						></el-button>
						<!-- 添加sku按钮 end -->

						<!-- 修改SPU按钮 begin -->
						<el-button
							type="warning"
							size="small"
							:icon="Edit"
							title="修改SPU"
							@click="updateSpu(row)"
						></el-button>
						<!-- 修改SPU按钮 begin -->

						<!-- 查看详情按钮 begin -->
						<el-button
							type="info"
							size="small"
							:icon="InfoFilled"
							title="查看SKU列表"
						></el-button>
						<!-- 查看详情按钮 end -->
						<!-- 删除按钮 begin -->
						<el-popconfirm title="你确定删除吗？">
							<template #reference>
								<el-button
									:icon="Delete"
									size="small"
									type="danger"
								></el-button>
							</template>
						</el-popconfirm>
						<!-- 删除按钮 end -->
					</template>
				</el-table-column>
				<!--操作 end -->
			</el-table>

			<!-- spu table展示 end -->

			<!-- Spu 分页 begin -->
			<el-pagination
				v-model:current-page="pageNo"
				v-model:page-size="pageSize"
				:page-sizes="[3, 5, 7, 9]"
				:small="true"
				:disabled="false"
				:background="true"
				layout="prev, pager, next, jumper,->,sizes,total"
				:total="total"
				@size-change="handler"
				@current-change="getHasSpuData"
			/>
			<!-- Spu 分页 end -->
		</div>
		<!-- 场景切换  1 平台SPU展示  end  -->

		<!-- 场景切换  2 添加和修改SPU  begin  -->
		<spu-Form
			v-show="scene == 1"
			@changeScene="changeScene"
			ref="spu"
		></spu-Form>
		<!-- 场景切换  2 添加修改SPU  end  -->

		<!-- 场景切换  3 添加SKU  begin  -->
		<sku-Form
			v-show="scene == 2"
			@changeScene="changeScene"
			ref="sku"
		></sku-Form>
		<!-- 场景切换  3 添加SKU  end  -->
	</el-card>
	<!-- spu数据展示 end -->
</template>

<script setup lang="ts">
	//引入element-plus图标
	import { Plus, Delete, Edit, InfoFilled } from '@element-plus/icons-vue';
	import { ref, watch, onUnmounted } from 'vue';
	//引入小仓库
	import useCategoryStore from '../../../stores/category';
	//引入请求API
	import { reqHasSpu } from '../../../api/product/spu/index';
	//引入spu组件
	import SpuForm from './spuForm.vue';
	//引入sku组件
	import SkuForm from './skuForm.vue';
	//获取小仓库
	let categoryStore = useCategoryStore();
	//分页当前页
	let pageNo = ref(1);
	//每页几条
	let pageSize = ref(3);
	//一共多少条数据
	let total = ref(0);
	//储存spu数据
	let spuArr = ref([]);

	//控制场景切换
	let scene = ref(0);

	//在父组件中获取spuform子组件的VC
	let spu = ref();
	let sku = ref();

	//监听三级分类id变化  发起请求  获取spu数据
	watch(
		() => categoryStore.c3Id,
		() => {
			getHasSpuData();
		}
	);

	//获取某一个三级分类下全部已有的产品单元展示SPU
	//封装一个请求函数
	//需要的参数  每页几条  第几页  三级分类id
	const getHasSpuData = async (pager = 1) => {
		pageNo.value = pager;
		let result: any = await reqHasSpu(
			pageNo.value,
			pageSize.value,
			categoryStore.c3Id
		);
		// console.log(result);
		spuArr.value = result.records;
		total.value = result.total;
	};
	//分页器下拉数据修改
	const handler = () => {
		getHasSpuData();
	};

	//点击添加SPU按钮回调
	const addSpu = () => {
		//切换场景为 1  显示添加spu场景
		scene.value = 1;
		spu.value.initAddSpudata(categoryStore.c3Id);
	};

	//点击修改spu按钮回调  需要传参
	const updateSpu = (row: any) => {
		console.log(spu.value);
		//点击修改spu切换到场景1
		scene.value = 1;
		//在父组件内部获取子组件实例:儿子方法与数据
		spu.value.initHasSpuData(row);
	};

	//点击添加SKU按钮回调
	// row即为已有的spu
	const addSku = (row) => {
		// console.log(row);
		//切换场景为 2  显示添加sku场景
		scene.value = 2;
		//调用子组件skuForm的一个方法：通知子组件发三个请求
		sku.value.initAddSkudata(categoryStore.c1Id, categoryStore.c2Id, row);
	};

	//父组件接受子组件spuform传过来的  保存 changeScene
	const changeScene = ({ scenes, flag }) => {
		//切换场景
		scene.value = scenes;
		// 重新捞数据
		if (flag == '添加') {
			//添加  捞第一页数据
			getHasSpuData();
		} else {
			//修改就捞当前页
			getHasSpuData(pageNo.value);
		}
	};
	//组件销毁前 清除下拉
	onUnmounted(() => {
		categoryStore.c1Arr = [];
		categoryStore.c1Id = '';
		categoryStore.c2Arr = [];
		categoryStore.c2Id = '';
		categoryStore.c3Arr = [];
		categoryStore.c3Id = '';
	});
</script>

<style scoped></style>
